<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">供应商管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/add_supplier' }">
          <div class="div2">新增供应商</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 查询客户列表 -->
    <el-collapse-transition>
      <div class="query" v-show="!show3">
        <div class="header">
          <span>数据查询</span>
          <p @click="show3 = true">收起</p>
        </div>
        <div class="polling">
          <el-form
            :inline="true"
            ref="form"
            :model="queryForm"
            label-width=""
            size="mini"
          >
            <el-form-item label="供应商">
              <el-input
                placeholder="请输入供应商姓名/电话"
                v-model="queryForm.info"
              ></el-input>
            </el-form-item>

            <el-form-item label="商品名称">
              <el-input
                placeholder="请输入商品名称"
                v-model="queryForm.goodName"
              ></el-input>
            </el-form-item>

            <div class="selectDate">
              <span>创建时间</span>
              <div class="picker">
                <el-date-picker
                  v-model="queryForm.date"
                  type="daterange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
            </div>

            <el-form-item label="创建人">
              <el-select
                v-model="queryForm.founder"
                placeholder="请选择创建人"
                clearable
                default-first-option
              >
                <el-option
                  v-for="items in createList"
                  :key="items.label"
                  :label="items.value"
                  :value="items.label"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="供应地址">
              <el-input
                placeholder="请输入供应商地址"
                v-model="queryForm.address"
              ></el-input>
            </el-form-item>

            <el-form-item label="选择品牌">
              <el-select
                v-model="queryForm.brand"
                placeholder="请选择产品品牌"
                clearable
                default-first-option
              >
                <el-option
                  v-for="items in brandselect"
                  :key="items.id"
                  :label="items.name"
                  :value="items.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品类型">
              <el-select
                v-model="queryForm.category"
                placeholder="请选择商品类型"
                clearable
                @change="onChange"
                default-first-option
              >
                <el-option :value="1" label="商品">商品</el-option>
                <el-option :value="2" label="赠品">赠品</el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                size="mini"
                @click="searchEvent()"
                v-on:keyup.enter="searchEvent"
                >搜索</el-button
              >
              <el-button plain size="mini" @click="reset">重置</el-button>
              <!-- <el-button type="primary">导出数据</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-collapse-transition>
    <!-- 查询客户列表 -->
    <div class="btnBox">
      <div class="btns">
        <el-button
          v-if="parArray.indexOf('addsupplierCode') != -1"
          @click="addFalse = true"
          type="primary"
          size="mini"
          ><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/icon_add.png"
            />添 加
          </span></el-button
        >
        <!-- <el-upload
          class="upload-demo"
          action="#"
          :show-file-list="false"
          :multiple="false"
          ref="tops"
          :http-request="orderImport"
          :limit="1"
        >
          <el-button size="mini" type="primary"><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/icon_add.png"
            />导 入
          </span></el-button>
        </el-upload> -->

        <!-- <el-button type="primary" size="mini"
          ><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/icon_daoru.png"
            />导 入
          </span></el-button
        > -->

        <el-button @click="exports" type="primary" size="mini"
          ><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/icon_daochu.png"
            />导 出
          </span></el-button
        >

        <el-button @click="tpPrintJS" type="primary" size="mini"
          ><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/dayin.png"
            />打 印
          </span></el-button
        >
        <el-button
          v-if="parArray.indexOf('delectSupplierCode') != -1"
          @click="deleteImg(0)"
          type="primary"
          size="mini"
          ><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/icon_shanchu.png"
            />删 除
          </span></el-button
        >
      </div>
      <p class="shows" @click="show3 = false" v-show="show3">搜索展开</p>
    </div>

    <div class="table">
      <el-table
        @selection-change="handleSelectionChange"
        :data="tableData.list"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50px"
        ></el-table-column>
        <el-table-column
          prop="supplierId"
          min-width="100"
          label="供应商编号"
        ></el-table-column>
        <el-table-column label="创建时间" min-width="120px">
          <template slot-scope="scope">{{
            $moment(scope.row.createdTime)
          }}</template>
        </el-table-column>
        <el-table-column prop="createdName" label="创建人"></el-table-column>
        <el-table-column
          prop="supplierName"
          label="供应商姓名"
          min-width="95px"
        ></el-table-column>
        <el-table-column
          prop="supplierContactPerson"
          label="联系人"
        ></el-table-column>
        <el-table-column
          prop="supplierPhone"
          min-width="110px"
          label="电话"
        ></el-table-column>
        <el-table-column
          prop="supplierAddress"
          min-width="100px"
          show-overflow-tooltip
          label="地址"
        ></el-table-column>
        <el-table-column
          prop="prodName"
          min-width="200"
          show-overflow-tooltip
          label="商品名称"
        ></el-table-column>
        <el-table-column prop="prodType" label="商品类型">
          <template slot-scope="scope">
            {{ scope.row.prodType == 1 ? "商品" : "赠品" }}
          </template>
        </el-table-column>
        <el-table-column prop="prodPrice" label="采购单价"></el-table-column>
        <el-table-column
          prop="prodSpecificationName"
          label="商品规格"
        ></el-table-column>
        <el-table-column label="图片" min-width="100px">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="
                scope.row.supplierImage && scope.row.supplierImage.length > 0 ? '查看更多' : '没有'
              "
              placement="top"
            >
              <el-image
                :src="ImgHttps + getImageBySrc(scope.row.supplierImage)"
                @click="
                  (imageSrc = scope.row.supplierImage), (dialogVisible = true)
                "
                style="width: 40px; height: 40px; cursor: pointer"
              ></el-image>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="商品材质">
          <template slot-scope="scope">
            <div
              v-if="scope.row.prodMaterial"
              style="
                cursor: pointer;
                width: 50px;
                height: 20px;
                overflow: hidden;
              "
              @click="moreProdMaterial(scope.row.prodMaterial)"
            >
              {{ scope.row.prodMaterial }}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <div
              v-if="parArray.indexOf('startUsingCode') != -1"
              style="color: #4168e7; cursor: pointer"
              @click="startUsing(scope.row.id)"
            >
              启用
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height: 50px"></div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum >= 10">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableData.pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="tableData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->

    <!-- 新增供应商 -->
    <el-dialog
      :visible.sync="addFalse"
      :append-to-body="true"
      title="新增供应商"
    >
      <div class="supplier">
        <el-form label-width="80px" label-position="right">
          <el-form-item label="供应商">
            <!-- <el-input v-model="formLabel.supplier"></el-input> -->
            <el-select
              v-model="formLabel.supplier"
              placeholder="请选择供应商"
              clearable
              remote
              allow-create
              :remote-method="remoteSMethod"
              filterable
              @change="supplierSelect"
              default-first-option
            >
              <el-option
                v-for="(item, index) in supplierNames"
                :value="item"
                :label="item"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="联系人">
            <el-input :maxlength="10" v-model="formLabel.linkName"></el-input>
          </el-form-item>

          <el-form-item label="电话">
            <el-input :maxlength="52" v-model="formLabel.phone"></el-input>
          </el-form-item>

          <el-form-item label="地址">
            <el-input :maxlength="32" v-model="formLabel.address"></el-input>
          </el-form-item>

          <el-form-item label="商品类型">
            <el-select
              v-model="formLabel.type"
              placeholder="请选择商品类型"
              clearable
              @change="onChange"
              default-first-option
            >
              <el-option :value="1" label="商品">商品</el-option>
              <el-option :value="2" label="赠品">赠品</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称">
            <!-- <el-input @input="remoteMethod" v-model="searchValue" placeholder="搜索商品名称"></el-input> -->
            <el-select
              :disabled="formLabel.type && formLabel.type.length == 0"
              v-model="formLabel.goodName"
              placeholder="请选择商品名称"
              clearable
              remote
              :remote-method="remoteMethod"
              filterable
              @change="goodNameSelect"
              default-first-option
            >
              <el-option
                v-for="(item, index) in goodNames"
                :value="item"
                :label="item"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品品牌">
            <el-input disabled v-model="formLabel.brand"></el-input>
          </el-form-item>

          <el-form-item label="商品规格">
            <el-input disabled v-model="formLabel.guige"></el-input>
          </el-form-item>

          <el-form-item label="采购单价">
            <el-input-number
              style="width:100%;"
              :max="9999999999"
              :controls="false"
              type="number"
              v-model="formLabel.price"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="商品材质">
            <el-input :maxlength="64" v-model="formLabel.material"></el-input>
          </el-form-item>
          <el-form-item label="上传图片">
            <el-upload
              class="video"
              ref="upload"
              action="#"
              multiple
              :limit="10"
              :on-exceed="test"
              :before-upload="beforeUploadImg"
              :http-request="imgUpload"
              :file-list="fileListImg"
              :show-file-list="false"
            >
              <i class="el-icon-upload2" style="font-size: 25px"></i>
            </el-upload>
            <div>
              <div
                v-for="(item, index) in fileListImg"
                :key="index"
                style="
                  border: 1px solid #666;
                  display: inline-block;
                  padding: 2px;
                  margin-right: 5px;
                  position: relative;
                "
              >
                <el-image
                  :src="ImgHttps + item.img"
                  style="width: 40px; height: 40px"
                ></el-image>
                <i
                  @click="deleteImg(1, index)"
                  class="el-icon-error"
                  style="
                    position: absolute;
                    top: -4px;
                    right: -6px;
                    background: #fff;
                    cursor: pointer;
                  "
                ></i>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="add">确定 </el-button>
        <el-button size="mini" @click="addFalse = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增供应商 -->
    <el-dialog
      title="图片"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="50%"
    >
      <div v-if="imageSrc" style="display: flex; flex-wrap: wrap">
        <el-image
          v-for="item in imageSrc.split(',')"
          :src="ImgHttps + item"
          style="margin-right: 10px; width: 100px; height: 100px"
          :key="item"
        ></el-image>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="isMoreProdMaterial"
      :append-to-body="true"
      title="材质"
    >
      <div style="display: flex">
        <div style="min-width: 80px">材质详情:</div>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          :value="moreProdMaterialText"
        >
        </el-input>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="isMoreProdMaterial = false">关闭</el-button>
      </span> -->
    </el-dialog>

    <vue-easy-print ref="easyPrint">
      <div style="display:flex;justify-content: center;">广东九航贸易有限公司</div>
      <div style="display:flex;justify-content: center;">供应商信息</div>
      <table border="1" style="text-align:center;" cellpadding="0" cellspacing="0">
        <tr>
          <th width="5%">序号</th>
          <th width="5%">创建时间</th>
          <th width="7%">创建人姓名</th>
          <th width="7%">供应商姓名</th>
          <th width="5%">联系人</th>
          <th width="5%">电话</th>
          <th width="5%">地址</th>
          <th width="5%">商品类型</th>
          <th width="5%">商品名称</th>
          <th width="5%">商品品牌</th>
          <th width="5%">商品规格</th>
          <th width="5%">商品单价</th>
          <th width="5%">商品材质</th>
        </tr>
        <!-- 每页显示onePageRow条数据 -->
        <tr v-for="(row, index) in multipleSelection" :key="index">
          <td>{{ index }}</td>
          <td>{{ $moment(row.createdTime) }}</td>
          <td>{{ row.createdName }}</td>
          <td>{{ row.supplierName }}</td>
          <td>{{ row.supplierContactPerson }}</td>
          <td>{{ row.supplierPhone }}</td>
          <td>{{ row.supplierAddress }}</td>
          <td>{{ row.prodType == 1?"商品":"赠品" }}</td>
          <td>{{ row.prodName }}</td>
          <td>{{ row.prodBrandName }}</td>
          <td>{{ row.prodSpecificationName }}</td>
          <td>{{ row.prodPrice }}</td>
          <td>{{ row.prodMaterial }}</td>
        </tr>
      </table>
    </vue-easy-print>
  </div>
</template>

<script>
import vueEasyPrint from "vue-easy-print";
import * as imageConversion from 'image-conversion';
export default {
  data() {
    return {
      fileListImg: [],
      show3: false,
      queryForm: {
        info: "",
        goodName: "",
        founder: "",
        address: "",
        brand: "",
        category: "",
        date: [],
      },
      brandselect: [],
      specificationList: [],
      options: [],
      tableData: {
        list: [],
        pageNo: 1,
        pageSize: 10,
      },
      addFalse: false, //新增弹框
      dialogVisible: false,
      formLabel: {
        supplier: "",
        linkName: "",
        phone: "",
        address: "",
        type: "",
        brand: "",
        guige: "",
        price: "",
        material: "",
        goodName: "",
      },
      createList: [],
      goodNames: [],
      goodsObj: [],
      searchValue: "",
      imageSrc: "",
      multipleSelection: [],
      supplierNames: [],
      supplierObjs: [],
      parArray: [],
      moreProdMaterialText: "",
      isMoreProdMaterial: false,
    };
  },
  created() {
    // 权限设定判断 add_supplier
    let limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = limits.buttonTreeDto.filter(
      (item) => item.menuCode === "add_supplier"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断 add_supplier
    this.brandSelectBox();
    this.brandSelect();
    this.getCreateList();
    this.specificationSelect();
    this.getList();
    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
  },
  activated() {
    this.getList();
  },
  beforeRouteLeave(to, form, next) {
    document.onkeydown = null;
    next();
  },
  methods: {
    tpPrintJS() {
      if (this.multipleSelection.length < 1) {
        this.$message.warning("请选择");
        this.value = "";
        return;
      }
      this.$refs.easyPrint.print();
    },
    orderImport(fileObj) {
      let formData = new FormData();
      formData.append("file", fileObj.file);

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        timeout: 120000,
      };

      this.axios
        .post("/order/v1/purchase/supplier/importData", formData, config)
        .then((res) => {
          if (res.data.errorUrl) {
            let url = this.ImgHttps + res.data.errorUrl; //创建下载链接
            let link = document.createElement("a"); //创建a标签
            link.style.display = "none"; //将a标签隐藏
            link.href = url; //给a标签添加下载链接
            link.setAttribute("download", "物流单号"); // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
            document.body.appendChild(link);
            link.click(); //执行a标签
          }
          $refs.tops.clearFiles();
          console.log(res);
        });
    },
    exports() {
      this.download(
        "/order/v1/purchase/supplier/supplierExportExcel",
        this.multipleSelection.map((res) => res.id)
      );
    },
    moreProdMaterial(e) {
      this.moreProdMaterialText = e;
      this.isMoreProdMaterial = true;
    },
    handleSizeChange(e) {
      this.tableData.pageSize = e;
      this.getList();
    },
    handleCurrentChange(e) {
      this.tableData.pageNo = e;
      this.getList();
    },

    test(file, fileList) {
      this.$message.warning(
        "图片最多10张,现在已上传" + this.fileListImg.length + "张"
      );
    },
    //表格多选
    handleSelectionChange(e) {
      this.multipleSelection = e;
    },
    remoteMethod(e) {
      this.getGoodNames(e);
    },
    remoteSMethod(e) {
      this.axios
        .post("/order/v1/purchase/supplier/purchaseSupplierList", {
          pageNo: 1, //第几页
          pageSize: 20000, //一页多少条
          supplierStatus: 1, //	未确认列表1 或者是 确认列表 2
          supplierName: e,
        })
        .then((res) => {
          this.supplierNames = res.data.list.map((i) => i.supplierName);
          this.supplierObjs = res.data.list;
        });
    },
    /**
     * @name: 选择商品类型触发
     * @test: test font
     * @msg:
     * @param {*} e:回调选择的value
     * @return {*}
     */
    onChange(e) {
      this.formLabel.type = e;
      this.$set(this.formLabel, "goodName", "");
      this.goodNames = [];
    },
    //删除图片
    deleteImg(type, index) {
      if (!this.multipleSelection.length && !type) {
        this.$message.warning("还没选择哦!");
        return;
      }

      if (type == 1) {
        this.fileListImg.splice(index, 1);
        return;
      }

      this.multipleSelection.forEach((res) => {
        this.tableData.list.splice(
          this.tableData.list.findIndex((i) => i.id == res.id),
          1
        );
      });
      this.axios
        .post(
          "order/v1/purchase/supplier/delPurchaseSupplier",
          this.multipleSelection.map((res) => res.id),
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("删除成功");
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //启用
    startUsing(id) {
      this.$confirm("确定要启用吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {
        this.axios
          .post("order/v1/purchase/supplier/confirmPurchaseSupplier", {
            ids: [id],
            supplierStatus: "2",
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("启用成功");
              this.getList();
            } else {
              this.$message.error(res.message);
            }
          });
      });
    },
    getImageBySrc(e) {
      if(!e){
        return ""
      }
      return e.split(",")[0];
    },
    imgUpload(fileObj) {
      let length = this.fileListImg.length;
      let formData = new FormData();
      formData.append("file", fileObj.file);

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      if (length <= 20) {
        this.axios
          .post(
            "/sys/v1/common/upload/files?pathName=internalSystem",
            formData,
            config,
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            if (res.code == 0) {
              // this.imageUrl = res.data.url;
              let obj = {
                img: res.data.url,
                creattime: new Date().toLocaleDateString(),
              };
              this.fileListImg.push(obj);
            } else {
              this.$message.error(res.message);
            }
          });
      } else {
        this.$message.warning("图片条数不能超过20条");
      }
    },
    /**
     * @name: 上传图片
     * @test: test font
     * @msg:
     * @param {*} file
     * @return {*}
     */
    beforeUploadImg(file) {
      return new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL;
        let isLt2M = file.size / 1024 / 1024 > 4; // 判定图片大小是否小于4MB
        // 这里需要计算出图片的长宽
        let img = new Image();
        img.onload = function () {
          file.width = img.width; // 获取到width放在了file属性上
          file.height = img.height; // 获取到height放在了file属性上
          let valid = img.width > 10000; // 图片宽度大于2000
          // console.log(11, file)
          // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
          if (valid || isLt2M) {
            imageConversion
              .compressAccurately(file, {
                size: 400,
                width: 2000,
              })
              .then((res) => {
                // console.log(33, res)
                resolve(res);
                this.$message.success(
                  "成功添加" + this.fileList.length + "张图片"
                );
              });
          } else resolve(file);
        }; // 需要把图片赋值
        img.src = _URL.createObjectURL(file);
      });
    },
    goodNameSelect(e) {
      let goodObj = this.goodsObj.find((res) => res.title == e);
      this.formLabel.goodName = e;
      this.formLabel.brand = this.brandselect.find(
        (res) => (res.name == goodObj.brandId)
      ).name;
      this.formLabel.guige = this.specificationList.find(
        (res) => res.id == goodObj.specificationId
      ).name;
    },
    supplierSelect(e) {
      let tempIf = 0;
      if (e.length) {
        if (this.supplierObjs.length) {
          let obj = this.supplierObjs.find((res) => res.supplierName == e);
          this.formLabel = {
            supplier: e,
            linkName: obj.supplierContactPerson,
            phone: obj.supplierPhone,
            address: obj.supplierAddress,
            type: "",
            brand: "",
            guige: "",
            price: "",
            material: "",
            goodName: "",
          };
        } else {
          tempIf = 1;
          this.formLabel.supplier = e;
          this.$message.warning("这个是新创建的!");
        }
      } else {
        tempIf = 1;
      }

      if (tempIf == 1) {
        this.formLabel = {
          supplier: this.formLabel.supplier,
          linkName: "",
          phone: "",
          address: "",
          type: "",
          brand: "",
          guige: "",
          price: "",
          material: "",
          goodName: "",
        };
      }
    },
    /**
     * @name: 添加客户
     * @test: test font
     * @msg:
     * @param {*}
     * @return {*}
     */
    add() {
      let data = this.formLabel;
      if(!data.address || !data.brand || !data.goodName || !data.guige || !data.linkName || !data.material || !data.phone || !data.type){
        this.$message.warning("请填写完整");
        return;
      }
      let prodBrandId = this.brandselect.find(
        (res) => res.name == this.formLabel.brand
      );
      console.log(prodBrandId);
      let prodId = this.goodsObj.find(
        (res) => res.title == this.formLabel.goodName
      );
      let prodSpecificationId = this.specificationList.find(
        (res) => res.name == this.formLabel.guige
      );
      let imgSrc = "";
      this.fileListImg.forEach((res) => {
        imgSrc += res.img + ",";
      });
      this.axios
        .post("/order/v1/purchase/supplier/addPurchaseSupplier", {
          prodBrandId: prodBrandId ? prodBrandId.id : "", //int品牌ID
          prodBrandName: this.formLabel.brand, //str品牌名字
          prodId: prodId ? prodId.id : "", //int商品ID
          prodMaterial: this.formLabel.material, //str商品材质
          prodName: this.formLabel.goodName, //str商品名字
          prodPrice: this.formLabel.price, //number商品单价
          prodSpecificationId: prodSpecificationId
            ? prodSpecificationId.id
            : "", //int商品规格id
          prodSpecificationName: this.formLabel.guige, //str商品规格名字
          prodType: this.formLabel.type, //商品类型(1.商品，2.赠品)
          supplierAddress: this.formLabel.address, //供应商地址
          supplierContactPerson: this.formLabel.linkName, //供应商联系人
          supplierImage: imgSrc.substring(0, imgSrc.length - 1), //供应商图片
          supplierName: this.formLabel.supplier, //供应商名字
          supplierPhone: this.formLabel.phone, //供应商电话
          supplierStatus: "", //供应商状态(不用传)
        })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("添加成功");
            this.addFalse = false;
            this.formLabel = {
              supplier: "",
              linkName: "",
              phone: "",
              address: "",
              type: "",
              brand: "",
              guige: "",
              price: "",
              material: "",
            };
            this.fileListImg = [];
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    /*
      重置
    */
    reset() {
      this.formLabel = {
        supplier: "",
        linkName: "",
        phone: "",
        address: "",
        type: "",
        brand: "",
        guige: "",
        price: "",
        material: "",
      };
      this.fileListImg = [];
    },
    getCreateList() {
      this.axios
        .get("order/v1/purchase/supplier/supplierCreatedByList")
        .then((res) => {
          if (res.code == 0) {
            this.createList = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    getGoodNames(n) {
      if (this.formLabel.type == "1") {
        this.axios
          .post(
            "/order/comm/commodity/list",
            {
              pageNo: 1,
              pageSize: 200000,
              title: n,
            },
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            this.goodsObj = res.data.list;
            this.goodNames = res.data.list.map((item) => item.title);
          });
      } else if (this.formLabel.type == "2") {
        this.axios
          .post(
            "/order/comm/complimentary/list",
            {
              pageNo: 1,
              pageSize: 200000,
              title: n,
            },
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            this.goodsObj = res.data.list;
            this.goodNames = res.data.list.map((item) => item.title);
          });
      } else {
        this.goodNames = [];
      }
    },
    /*
      获取列表数据
    */
    getList() {
      this.axios
        .post("/order/v1/purchase/supplier/purchaseSupplierList", {
          createdBy: this.queryForm.founder, //创建人
          endTime: this.queryForm.date[1] ? this.queryForm.date[1] : "", //结束时间
          pageNo: this.tableData.pageNo, //第几页
          pageSize: this.tableData.pageSize, //一页多少条
          prodType: this.queryForm.category, //品牌id
          prodName: this.queryForm.goodName, //产品名称
          prodBrandId: this.queryForm.brand,
          startTime: this.queryForm.date[0] ? this.queryForm.date[0] : "", //开始时间
          supplierAddress: this.queryForm.address, //供应商地址
          supplierStatus: 1, //	未确认列表1 或者是 确认列表 2
          keyword: this.queryForm.info,
        })
        .then((res) => {
          this.tableData = res.data;
        });
    },
    searchEvent() {
      this.getList();
    },
    reset() {
      this.queryForm = {
        info: "",
        goodName: "",
        founder: "",
        address: "",
        brand: "",
        category: "",
        date: [],
      };
      this.getList();
    },
    //** 品牌下拉 **//
    brandSelectBox() {
      this.axios.get("/order/comm/commodity/selectList").then((res) => {
        if (res.code == 0) {
          this.brandselect = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 分类下拉框
    brandSelect() {
      this.axios.get("/order/comm/commodity/selectBrand").then((res) => {
        if (res.code == 0) {
          this.options = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //商品规格
    specificationSelect() {
      this.axios.get("/order//comm/commDictonary/list").then((res) => {
        if (res.code == 0) {
          this.specificationList = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  components: {
    vueEasyPrint,
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
/deep/.el-dialog {
  width: 590px !important;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.query {
  background: #fff;
  padding: 10px;

  .el-form-item {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 8px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  span {
    font-size: 15px;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}
.btns {
  > p {
    background: #409eff;
    padding: 2px 15px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    border-radius: 4px;
    img {
      width: 15px;
      height: 15px;
      display: inline-block;
      vertical-align: middle;
    }
    span {
      font-size: 14px;
      color: #fff;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8px;
    }
  }
}
/deep/.cell {
  color: #333;
}
.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.supplier {
  /deep/.el-form-item__label {
    width: 100px;
    height: 30px;
    line-height: 30px;
  }
  /deep/.el-input,
  /deep/.el-input__inner {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
  /deep/.el-form-item {
    margin-bottom: 2px;
  }
  /deep/.el-select {
    width: 100%;
    /deep/.el-input__icon {
      height: 30px;
      line-height: 30px;
    }
  }
}
.btnBox {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  .shows {
    background: #409eff;
    padding: 0 15px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    height: 25px;
    line-height: 25px;
  }
}
</style>